<template>
	<view>
		<!-- <tito class="tito" title="我的团队" lefticon="left" @clickLeft="clickLeft" /> -->
		<u-navbar title="我的团队" :autoBack="true" bgColor="transparent" :fixed="false">
		</u-navbar>
		<view class="whole">
			<uni-segmented-control :current="Number(current)" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#2590FA"></uni-segmented-control>
		</view>
		<view class="information" v-if="current == 0 && teamList.length > 0">
			<view class="informationList" v-for="(item, index) in teamList" :key="item.id">
				<view class="tox">
					<image :src="item.logo" mode=""></image>
				</view>
				<view class="name">
					{{ item.name }}
				</view>
				<view class="time">
					{{ item.createTime }}
				</view>
			</view>
		</view>
		<view class="information" v-else-if="current == 1 && teamList.length > 0">
			<view class="zhuan" v-for="(item, index) in teamList" :key="item.id">
				<view class="informationList fomList">
					<view class="tox">
						<image :src="item.logo" mode=""></image>
					</view>
					<view class="name">
						{{ item.name }}
					</view>
					<view class="time">
						{{ item.createTime }}
					</view>
				</view>
				<view class="to">
					转介
				</view>
				<view class="informationList fomList" v-for="(item2, index2) in item.customerList" :key="item2.id">
					<view class="tox">
						<image :src="item.logo" mode=""></image>
					</view>
					<view class="name">
						{{ item.name }}
					</view>
					<view class="time">
						{{ item.createTime }}
					</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>
			暂无更多
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			items: ['直推客户', '转介绍客户'],
			current: "0",
			page: 1,//页
			limit: 10,//条
			teamList: []
		};
	},
	onLoad() {
		this.getTeamList()
	},
	onReachBottom() {
		this.page++
		this.getTeamList()
	},
	methods: {
		clickLeft() {
			uni.navigateBack()
		},
		onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
				this.page = 1
				this.teamList = []
				this.getTeamList()
			}
		},
		//我的团队列表
		getTeamList() {
			let data = {
				page: this.page,
				limit: this.limit,
				type: Number(this.current) + 1
			}
			this.$request.get("/water-platform-app-api/customer/team/list", data).then(res => {
				if (res.data.length > 0) {
					console.log(res, '我的团队列表');
					this.teamList.push(...res.data)
				} else {
					uni.showToast({
						title: "没有更多了！",
						icon: "none"
					})
				}
			})
		},
	}
}
</script>

<style lang="scss">
.none {
	text-align: center;
	margin-top: 500rpx;
	font-size: 32rpx;
	color: #B1B2B2;
}

.information {
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 30rpx;

	.zhuan:last-child {
		border-bottom: none;
	}

	.zhuan {
		margin-top: 48rpx;
		padding-bottom: 48rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #F4F5F5;
	}

	.fomList {
		border-bottom: none !important;
	}

	.informationList {
		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #F4F5F5;

		.tox {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				vertical-align: middle;
			}
		}

		.name {
			font-size: 28rpx;
			color: #000000;
			margin-left: 24rpx;
		}

		.time {
			font-size: 24rpx;
			color: #616366;
			margin-left: auto;
		}
	}

	.to {
		font-size: 24rpx;
		color: #2590FA;
		margin-left: 92rpx;
	}
}
</style>